<!--
 * @Author: sxb
 * @Email: sxb@mail.com
 * @Date: 2020-06-22 14:05:35
 * @Descripttion: 
--> 
<template>
  <div>
    <el-button size="mini" type="primary" icon="el-icon-edit" @click="handleEdit"/>
    <el-popover v-model="pop" placement="top" width="180" trigger="manual" @show="onPopoverShow" @hide="onPopoverHide">
      <p>{{ msg }}</p>
      <div style="text-align: right; margin: 0">
        <el-button size="mini" type="text" @click="pop = false">取消</el-button>
        <el-button type="primary" size="mini" @click="doDelete(data)">确定</el-button>
      </div>
      <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini" @click="toDelete" />
    </el-popover>
  </div>
</template>
<script>
import { del } from '@/api/system/announcement'

export default {
  name : 'udOperation',
  props: {
    data: {
      type: Object,
      required: true
    },
    msg: {
      type: String,
      default: '确定删除本条数据吗？'
    }
  },
  data(){
    return{
      pop: false
    }
  },
  methods:{
    handleEdit(){
      this.$emit('bindDepartment', this.data);
    },
    toDelete() {
      this.pop = true
    },
    doDelete(data){
      let delList = [];
      delList.push(data.id);
      del(delList)
        .then(res => {
          this.pop = false;
          this.$emit('getDepts')
        })
        .catch(error => {
          console.log(error);
        });
      this.pop = false;
    },
    onPopoverShow() {
      setTimeout(() => {
        document.addEventListener('click', this.handleDocumentClick)
      }, 0)
    },
    onPopoverHide() {
      document.removeEventListener('click', this.handleDocumentClick)
    },
    handleDocumentClick(event) {
      this.pop = false
    }
  }
}
</script>